<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>设置密码</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/data-flex.min.css" rel="stylesheet" type="text/css">
    <style>
        .container {
            margin: 15px;
            padding: 10px 10px 0 10px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 10px;
        }

        .row {
            height: 50px;
        }

        input {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        input::placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .bor {
            height: 1px;
            background: rgb(212, 212, 212);
            transform: scaleY(0.5);
        }

        .eye-close,
        .eye-open {
            width: 16px;
            height: 16px;
        }

        .tips {
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            margin-left: 15px;
        }

        .btn {
            margin: 45px auto 0 auto;
            width: 210px;
            height: 46px;
            background: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            text-align: center;
            padding-top: 8px;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 0.5);
            line-height: 25px;
        }
    </style>
</head>

<body class="blue-bg">
    <div class="vueApp" v-cloak>
        <div class="container" id="login">
            <div class="row" data-flex="cross:center">
                <input style="text-indent: 4px;" data-flex-box="1" spellcheck="false"
                    :type="eye1Close ? 'password': 'text'" v-model="password1" minlength="6" maxlength="16"
                    data-type="_password" data-verify="true" data-null="true" data-regular="true" name="密码"
                    placeholder="设置登录密码">
                <div class="eye-close" @click="eye1Close = !eye1Close">
                    <img :src="eye1Close ? '../../image/ui/eye_close.png' : '../../image/ui/eye_open.png'" alt="">
                </div>
            </div>
            <div class="bor"></div>
            <div class="row" data-flex="cross:center">
                <input style="text-indent: 4px;" data-flex-box="1" spellcheck="false"
                    :type="eye2Close ? 'password': 'text'" v-model="password2" minlength="6" maxlength="16"
                    data-type="_password" data-verify="true" data-null="true" data-regular="true" name="密码"
                    placeholder="请确认登录密码">
                <div class="eye-open" @click="eye2Close = !eye2Close">
                    <img :src="eye2Close ? '../../image/ui/eye_close.png' : '../../image/ui/eye_open.png'" alt="">
                </div>
            </div>
        </div>
        <div class="tips">6-16位数字、字母或组合</div>
        <div class="btn" @click="isAvailable ? fnSubmit() : ''">完善资料</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script>
    var $S;
    var USER;
    var pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        pageParam = api.pageParam;
        fnInit();
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                password1: '',
                password2: '',
                eye1Close: false,
                eye2Close: false,
                // 按钮是否可用
                isAvailable: false,
            },
            watch: { //监听手机号和密码的值，来判断开启和关闭登录按钮的点击状态
                password1: function () {
                    fnLoginBtnStatus(this);
                },
                password2: function () {
                    fnLoginBtnStatus(this);
                }
            }
        })
    }

    //修改登录按钮的启用状态
    function fnLoginBtnStatus(el) {
        if (!isEmpty(vm.password1) && !isEmpty(vm.password2)) {
            vm.isAvailable = true;
        } else {
            vm.isAvailable = false;
            fnToast('密码不能为空');
        }
    }

    // 提交
    function fnSubmit() {
        if (fnVerify("login")) {
            if (vm.password1 === vm.password2) {
                fnOpenWin({
                    name: 'select_id',
                    url: './select_id.html',
                    pageParam: {
                        phone: pageParam.phone,
                        code: pageParam.code,
                        loginPageParams: pageParam.loginPageParams,
                        password: vm.password1
                    }
                });
            } else {
                fnToast("密码输入不一致,请重新输入");
            }
        }
    }
</script>


</html>